<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义全局组件</title>
</head>
<body>
<div id="app">
    <!-- 使用定义好的全局组件 -->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    /*
    - 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
    - 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
    - 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
    - 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
    - data的定义方式比较特殊，必须是一个函数。
    */

    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        // 跟下面的data是一样的，优点是可以复用。
        // 这是一个方法，一个组件不是只用一次，将来要复用。如果你是一个对象不是一个函数，
        // 不管你在哪个地方用都是同一个对象。是一个函数，你用一次，组件调用一次，每个组件
        // 之间互不干扰。
        data(){
            return {
                count: 0
            }
        }
    })

    // 生成一个Vue实例
    var app = new Vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{ // 数据
            name:"虎哥"
        }
    })
</script>
</body>
</html>
